<template>
    <div id='' class='i_steps'>
        <!-- 步骤条组件 -->
        <div class="header">
            <slot name="header">
                <Steps :current="current">
                    <Step v-for="(item,index) in config.step.list" :key="index" :title="item.title" :content='item.content'></Step>
                </Steps>
            </slot>
        </div>
        <div class="content">
            <slot name="content"></slot>
        </div>
        <div class="bottom_button" :style="{'--layout':config.button.layout?config.button.layout:'center'}">
            <Button class="i_buttom_group" v-for="(item,index) in config.button.items" :key="index" :type="item.type" @click="item.evnet">{{item.name}}</Button>
        </div>
    </div>
</template>
<script>
export default {
    name: '',
    props: ['config'],
    data() {
        return {
            current: 0,
        };
    },
    components: {},
    computed: {},
    beforeMount() { },
    mounted() { },
    methods: {
        changeStep(value) {
            this.current = value;
            this.$emit('changeStep',this.current);
        }
    },
    watch: {}
}
</script>
<style lang='less' scoped>
@height8px: 8px;
.i_steps {
    width: 100%;
    padding:  0 20px;
    background-color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-radius: 12px;
    .header {
        position: relative;
        height: 10%;
        display: flex;
        align-items: center;
    }
    .header::before {
        content: "";
        position: absolute;
        width: 110%;
        bottom: -@height8px;
        background-color: #f7f6f9;
        height: @height8px;
        left: -5%;
    }
    .content {
        height: 80%;
        overflow: auto;
        margin-top: 20px;
    }
    .bottom_button {
        position: relative;
        height: 10%;
        display: flex;
        align-items: center;
        justify-content: var(--layout);
        .i_buttom_group:not(:first-child) {
            margin-left: 20px;
        }
    }
    .bottom_button::before {
        content: "";
        position: absolute;
        width: 110%;
        top: -@height8px;
        background-color: #f7f6f9;
        height: @height8px;
        left: -5%;
    }
}
</style>